<template class="page-background">
	<view class="header">
		<image src="../../static/logo/LOGO.png" mode="" class="logo-image"></image>
		<view class="title">超玩盲盒商城</view>
	</view>
	<van-toast id="van-toast" />
	<view class="content">
		<view class="row-input">
			<image mode="aspectFit" src="../../static/login/login1_account.png"></image>
			<input placeholder="请输入您的手机号" maxlength="11" v-model="loginForm.username" />
		</view>
		<view class="row-input">
			<image mode="aspectFit" src="../../static/login/login1_password.png"></image>
			<input placeholder="请输入您的密码" maxlength="18" v-model="loginForm.password" type="password" />
		</view>
		<view class="login-code">
			<input class="login-code-input" placeholder="请输入您的验证码" maxlength="4" v-model="loginForm.code"
				auto-complete="off" />
			<img :src="codeUrl" @click="getCode" class="login-code-img" />
		</view>
		<view class="login-btn" @click="handleLogin">
			确认登录
		</view>
		<view class="function-link">
			<text @click="register">新用户注册</text>
			<text @click="forget">忘记密码</text>
		</view>
	</view>
</template>

<script setup>
	import {
		getCodeImg,
		login,
		getUserInfo,
	} from '@/api/login.js';
	import {
		onMounted,
		reactive,
		ref,
	} from 'vue';
	import Toast from '@vant/weapp/dist/toast/toast';
	import {
		useRouter
	} from 'vue-router';
	const router = useRouter();
	const codeUrl = ref("");
	const loginForm = reactive({
		username: "13859020387",
		password: "123456",
		rememberMe: false,
		uuid: "",
		code: ""
	});
	// 获取 van-toast 组件实例
	const vanToast = ref(null);
	// 登录
	const handleLogin = () => {

		// Toast('我是提示文案，建议不超过十五字~');
		login(loginForm.username, loginForm.password, loginForm.code, loginForm.uuid).then(res => {
			console.log('res', res)
			// 提示消息
			getCode();
			if (res.data.msg != null) {
				Toast(res.data.msg);
			}
			if (res.data && res.data.data && res.data.data.access_token) {
				uni.switchTab({
					url: '/pages/index/index'
				});
				getUserInfo(loginForm.username, res.data.data.access_token).then(res => {
					console.log('userInfo', res.data.data)
					uni.setStorage({
						key: 'nickName',
						data: res.data.data.nickName
					})
					uni.setStorage({
						key: 'userName',
						data: res.data.data.userName
					})
					uni.setStorage({
						key: 'userImg',
						data: res.data.data.userImg
					})
					uni.setStorage({
						key: 'userId',
						data: res.data.data.userId
					})
					uni.setStorage({
						key: 'userstatus',
						data: 1
					})
				})
				// 存储 access_token 到 localStorage
				uni.setStorage({
					key: 'Admin-Token',
					data: res.data.data.access_token,
				});
			}
		});
	}
	// 获取验证码
	const getCode = () => {
		getCodeImg().then(res => {
			loginForm.uuid = res.data.uuid;
			codeUrl.value = "data:image/gif;base64," + res.data.img;
		}).catch((err) => {
			console.error('失败', err);
		});
	};
	onMounted(() => {
		// 在组件挂载后调用 getCode 方法获取验证码
		getCode();
	});

	// 跳转到注册页面
	const register = () => {
		uni.navigateTo({
			url: '/pages/register/register'
		})
	}
</script>

<style lang="scss" scoped>
	.header {
		padding: 10rpx 60rpx;
		display: flex;
		justify-content: center;
		flex-direction: row;
		align-items: center;

		.logo-image {
			width: 80rpx;
			height: 80rpx;
		}

		.title {
			font-size: 60rpx;
			font-weight: 2000rpx;
			margin-left: 20rpx;
		}
	}

	.content {
		padding: 100rpx 60rpx;
		display: flex;
		flex-direction: column;
	}

	.row-input {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 30rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #818181;

		image {
			width: 45rpx;
			height: 45rpx;
		}

		input {
			font-size: 30rpx;
			padding-left: 30rpx;
			width: 500rpx;
		}
	}

	.verifyCode {
		width: 200rpx;
	}

	.login-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		margin-top: 80rpx;
		height: 80rpx;
		font-size: 30rpx;
		background-color: #fd661f;
		color: #FFFFFF;
	}

	.function-link {
		margin: 0 20rpx;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		color: #fd661f;
	}

	.login-code {
		display: flex;
		padding-top: 10rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #818181;

		.login-code-img {
			box-sizing: border-box;
			width: 260rpx;
			height: 90rpx;
		}

		.login-code-input {
			font-size: 30rpx;
			padding-left: 30rpx;
			width: 500rpx;
			height: 100rpx;
		}
	}
</style>